<template>
	<!-- 物流信息 -->
	<view class="logisticsInformation" v-if="orderInfo">
		<!-- 送达地址 -->
		<view class="site">
			<view class="address">
				<uni-icons type="location-filled" size="20" style="margin-right: 3px"></uni-icons>
				{{ address_info.address }}
			</view>
			<view class="user">
				<view class="name">
					{{ address_info.name }}
				</view>
				<view class="iphone">
					{{ address_info.phone }}
				</view>
			</view>
		</view>

		<!-- 物流信息 -->
		<view class="logistics">
			<view class="logistics_title">
				<u-icon name="car-fill" size="24" style="margin-right: 5px"></u-icon>
				物流信息
			</view>
			<view class="expressDelivery">
				<view class="expressDeliveryInfo">
					<view class="name">
						{{ distribution[0].deliveryCompany }}
					</view>
					<view class="num">
						{{ distribution[0].deliverySn }}
					</view>
				</view>

				<view class="expressDelivery-option">
					<view class="option-item" @click="copyText(distribution[0].deliverySn)">复制</view>
					<view class="zw"></view>
					<view class="option-item" @click="openIphone(distribution[0].mobile)">打电话</view>
				</view>
			</view>
			<u-steps :current="current" direction="column">
				<u-steps-item :title="item.status" :desc="item.time" v-for="(item, index) in distribution[0].expressInfos" :key="index"></u-steps-item>
			</u-steps>
		</view>
	</view>
</template>

<script>
import { flashManageOrderDetail } from '../../../api/flashManage/index.js';
export default {
	data() {
		return {
			storeType: '',
			orderInfo: null,
			address_info: {},
			distribution: [],
			current:""
		};
	},
	onLoad(option) {
		const { id } = option;
		this.storeType = this.$store.state.storeType;
		this.getflashManageOrderDetail(id);
	},
	methods: {
		// 订单详情
		async getflashManageOrderDetail(id) {
			try {
				const resData = await flashManageOrderDetail({
					id,
					type: this.storeType
				});
				this.orderInfo = resData.data;
				this.address_info = this.orderInfo.address_info;
				this.distribution = this.orderInfo.distribution;
				this.current = this.distribution[0].expressInfos.length - 1;
			} catch (e) {
				throw Error(e);
			}
		},
		
		openIphone(phoneNumber){
			uni.makePhoneCall({
				phoneNumber
			})
		},
		
		// 复制
		async copyText(text) {
			try {
				await uni.setClipboardData({
					data: text
				});
				uni.showToast({
					title: '复制成功',
					icon: 'none',
					duration: 1500
				});
			} catch (e) {
				uni.showToast({
					title: '复制失败',
					icon: 'none',
					duration: 1500
				});
			}
		},
	}
};
</script>

<style scoped lang="scss">
.logisticsInformation {
	box-sizing: border-box;
	padding: 20rpx;
	color: #444;
	.site {
		background-color: #fff;
		box-sizing: border-box;
		padding: 30rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
		.address {
			margin-bottom: 5px;
			font-size: 28rpx;
			display: flex;
			align-items: center;
		}

		.user {
			display: flex;
			align-items: center;
			color: #999;
			padding-left: 23px;
			.name {
				margin-right: 15px;
			}
		}
	}

	.logistics {
		background-color: #fff;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 10rpx;
		.logistics_title {
			display: flex;
			align-items: center;
		}
		.expressDelivery {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40px;
			font-size: 26rpx;
			color: #777;
			.expressDeliveryInfo {
				display: flex;
			}
			.expressDelivery-option {
				display: flex;
				gap: 10px;
				align-items: center;
				.zw {
					height: 12px;
					width: 1px;
					background-color: #999;
				}
			}
		}
	}

	.slot-icon {
		width: 21px;
		height: 21px;
		background-color: $u-warning;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 21px;
		text-align: center;
	}
}
</style>
